<template>
  <div class="col-item" :style="{'min-width':colMinWidth&&colMinWidth[col.columns]?colMinWidth[col.columns]:''}" v-if="col&&col.label">
    <text> {{col.label||''}}</text>
    <view class="right-tip">
      <text class="cuIcon-questionfill"
        v-if="explainFields&&explainFields[col.columns]&&explainFields&&explainFields[col.columns].text"
        @click="changeExplainTip"></text>
      <view class="tip-content" v-if="fieldExplain.text&&showExplainTip">
        <view class="shadow" @click="changeExplainTip">
    
        </view>
        <view class="text" @click.stop="">
          {{fieldExplain.text}}
        </view>
      </view>
    </view>
  </div>
</template>

<script>
  export default {
    props: {
      explainFields:{
        type: Object
      },
      colMinWidth:{
        type: Object
      },
      col: {
        type: Object
      },
    },
    data() {
      return {
        showExplainTip: false
      }
    },
    methods: {
      changeExplainTip() {
        this.showExplainTip = !this.showExplainTip
      }
    },
  }
</script>

<style scoped>

</style>